<template>
  <!-- 用户详情页 -->
  <div class="user-detail mtop-20" v-loading="isLoading">
    <!-- 头部 -->
    <div class="user-info">
      <div class="img-wrap">
        <img :src="info.photoPath || defaultPhotoPath" alt="" />
      </div>
      <div class="info-wrap mleft-20">
        <div class="font-24 font-bold">{{ info.nickname }}</div>
        <div class="info-btn">
          <div>
            <span class="font-14 sex-wrap">
              性别：
              <i
                v-if="info.gender == 1"
                style="color: #3da1d1"
                class="el-icon-male"
              ></i>
              <i
                v-else-if="info.gender == 2"
                style="color: #ea5a95"
                class="el-icon-female"
              ></i>
              <i
                v-else-if="info.gender == 0"
                style="color: #666; font-style: normal"
                >保密</i
              >
            </span>
            <span class="mleft-10 font-14 sex-wrap">
              生日：{{ birthday }}
            </span>
          </div>
          <div v-if="isLogin">
            <button class="btn btn-white" @click="toUserEdit">
              <i class="el-icon-edit"></i>编辑个人信息
            </button>
          </div>
        </div>

        <div class="desc-item mtop-10 font-14">
          个人介绍：{{ info.signature || "什么都没有介绍" }}
        </div>
      </div>
    </div>
    <div class="menu-wrap mtop-20">
      <TabMenu :menuList="['创建的歌单']"></TabMenu>
    </div>
    <!--列表 -->
    <div class="mtop-20" v-show="showTab === 1">
      <template v-if="list.length === 0">
        <span>暂无歌单</span>
      </template>
      <template v-else-if="creList.length !== 0">
        <ImgList @clickImg="toPlayListDetail" :list="creList" type="playlist">
          <template v-slot="{ item }">
            <div class="text-hidden">
              {{ item.name }}
            </div>
          </template>
        </ImgList>
      </template>
      <template v-else>
        <span>该用户没有创建的歌单或已隐藏</span>
      </template>
    </div>
  </div>
</template>

<script>
import ImgList from "@/components/list/ImgList.vue";
import TabMenu from "@/components/menu/TabMenu.vue";
import { getUserDetail, getUserPlayList } from "@/api/api_user";
import { mapState } from "vuex";
import dayjs from "dayjs";

export default {
  components: { ImgList, TabMenu },
  data() {
    return {
      info: {}, //基本信息
      list: [], //歌单列表
      offset: 0,
      showTab: 1,
      isLoading: true,
      defaultPhotoPath: require("../../assets/img/avatar.jpeg"),
    };
  },
  computed: {
    birthday() {
      return this.info.birthday
        ? dayjs(this.info.birthday).format("YYYY-MM-DD")
        : dayjs(new Date()).format("YYYY-MM-DD");
    },
    /* 用户/个人 创建/收藏的歌单 */
    creList() {
      return this.list;
    },
    subList() {
      return this.list;
    },
    ...mapState(["profile", "isLogin", "account"]),
  },
  created() {
    this.list = [];
    this.isLoading = true;
    this.getDetail();
    this.getUserPlayList();  
  },
  methods: {
    /* 获取详情信息 */
    async getDetail() {
      const token = this.account.token
        ? this.account.token
        : localStorage.getItem("token");
      const res = await getUserDetail(token);
      if (res.status !== 200)
        this.$message({ type: "error", message: "出错了~" });
      if (res.data.data) {
        this.info = res.data.data;//res.data.data//这个才行，等下回去解决一下，欧克欧克
        /* 做到这里，我遇到了一个问题，就是这里没有封装axios请求，注意axios封装好的请求它自己会有一个特定形式的返回值 */
        //TODO:axios没有进行封装问题，后面的几个请求好像也没有去封装！！！。
        if (res.data.data.signature === null || res.data.data.signature === "null") {
          this.info.signature = null;
        }
        this.$store.commit("setProfile", res.data.data);//数据正确
      }
      this.isLoading = false;
    },
    /* 获取收藏及创建歌单 */
    async getUserPlayList() {
      const res = await getUserPlayList();
      if (res.status !== 200) return;
      if (this.list.length === 0) this.list = res.data.playList;
      else {
        this.list.push(...Object.freeze(res.data.playList));
      }
    },

    toPlayListDetail(id) {
      this.$router.push({ path: "/playlistdetail/" + id });
    },
    toUserEdit() {
      this.$router.push("/useredit");
    },
  },
};
</script>

<style lang="less" scoped>
.user-info {
  display: flex;

  .img-wrap {
    height: 100px;
    width: 100px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .info-wrap {
    flex: 1;

    .info-btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
    }

    .desc-item {
      color: #676767;
    }
  }
}

@media screen and (max-width: 415px) {
  .img-wrap {
    display: none;
  }
}
</style>
